<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '../../stores/user'
import { login, getCaptchaImage } from '@/api/interface/web/user'
// import { useRouter } from 'vue-router'
import { md5 } from 'js-md5'
import { encode } from 'js-base64'
import { Check, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const fullscreenLoading = ref(false)

const emit = defineEmits(['change'])

// const router = useRouter()

const userStore = useUserStore()

const formRef = ref()

const form = reactive<any>({
  username: '',
  password: '',
  code: '',
})

const rules = reactive<any>({
  username: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ],
})

// 获取验证码
const captchaImage: any = ref('')
const captchaSessionId: any = ref('')
const getCode = async () => {
  fullscreenLoading.value = true
  const res: any = await getCaptchaImage({})
  captchaImage.value = res.img
  captchaSessionId.value = res.sessionId
  fullscreenLoading.value = false
}

const handleLogin = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      if (!agree.value) {
        ElMessage({
          message: '请阅读并勾选底部协议',
          type: 'warning',
          grouping: true,
        })
        return
      }
      fullscreenLoading.value = true
      const info = {
        username: form.username,
        password: form.password,
        sessionId: captchaSessionId.value,
        code: form.code,
      }
      login(info)
        .then((data: any) => {
          if (data) {
            userStore.login(data)
          }
        })
        .catch(() => {
          getCode()
          fullscreenLoading.value = false
        })
        .finally(() => {
          fullscreenLoading.value = false
        })
    }
  })
}

const goForget = () => {
  if (fullscreenLoading.value) {
    return
  }
  emit('change', 'forget')
}

const keyDownFun = (e: any) => {
  if (e.key == 'Enter') {
    handleLogin()
  }
}

onMounted(() => {
  window.addEventListener('keydown', keyDownFun)
  getCode()
  console.log(encode(md5('123456')))
})

onUnmounted(() => {
  window.removeEventListener('keydown', keyDownFun, false)
})

const agree = ref(false)

// const onPrivate = () => {
//   window.open('https://www.flowersyn.com/privacy-pc')
// }

const onService = () => {
  // window.open('https://www.flowersyn.com/agreement-pc')
}
</script>

<template>
  <div class="login-form-wrapper" v-loading.fullscreen="fullscreenLoading">
    <div class="logo-container">
      <div class="logo"></div>
      <div class="title">登录</div>
    </div>
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="username-container form-input-container">
        <div class="label">手机号</div>
        <div class="input-container">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入手机号" />
          </el-form-item>
        </div>
      </div>
      <div class="password-container form-input-container">
        <div class="label">密码</div>
        <div class="input-container">
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" show-password />
          </el-form-item>
        </div>
      </div>
      <div class="code-container form-input-container">
        <div class="label">验证码</div>
        <div class="input-container">
          <el-form-item prop="code">
            <el-input v-model="form.code" placeholder="请输入验证码" />
          </el-form-item>
          <div class="code-img-container" @click="getCode">
            <img :src="captchaImage" alt="" style="margin-top: 0px; width: 100px; height: 32px" />
          </div>
        </div>
      </div>
    </el-form>
    <div class="operation-container">
      <!-- <div class="register-container">没有账号？<span @click="goRegister">去注册</span></div> -->
      <div class="forget-container"><span @click="goForget">忘记密码?</span></div>
    </div>
    <div class="protocol-container">
      <el-switch v-model="agree" inline-prompt :active-icon="Check" :inactive-icon="Close" />
      <div class="text-container">
        <div class="tip">已阅读并同意</div>
        <!-- <div class="protocol-text" @click="onPrivate">《隐私保护政策》</div> -->
        <div class="protocol-text" @click="onService">《服务协议》</div>
      </div>
    </div>
    <div class="submit-container">
      <el-button type="primary" round @click="handleLogin">
        <span class="submit-text">登录</span>
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-form-wrapper {
  @include rect(auto, auto);
  @include flex(column, center, center);
  .logo-container {
    width: 100%;
    @include flex(row, flex-start, center);
    margin-bottom: 50px;
    .title {
      font-family: 'PingFangSC-Bold';
      font-weight: 600;
      font-size: 36px;
      color: #29304c;
      pointer-events: none;
    }
    .logo {
      @include rect(74px, 78px);
      @include background-image('../imgs/logo-new.png', 100%, 100%);
      margin-right: 21px;
    }
  }
  .code-container {
    .input-container {
      position: relative;
      .code-img-container {
        width: 120px;
        position: absolute;
        top: 15px;
        right: 24px;
        cursor: pointer;
      }
    }
  }
  .operation-container {
    width: 100%;
    @include flex(row, flex-end, center);
    margin-top: 16px;
    margin-bottom: 22px;
    pointer-events: none;
    padding-right: 50px;
    .register-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 18px;
      color: rgba(144, 147, 154, 1);
      span {
        text-decoration: underline;
        cursor: pointer;
        pointer-events: auto;
      }
    }
    .forget-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 18px;
      color: rgba(144, 147, 154, 1);
      span {
        cursor: pointer;
        pointer-events: auto;
      }
    }
    .forget-container:hover {
      span {
        text-decoration: underline;
      }
    }
    .register-container + .forget-container {
      margin-left: 140px;
    }
  }
  .submit-container {
    --el-border-radius-round: 30px;
    .el-button {
      height: 60px;
      width: 418px;
    }
    .submit-text {
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 18px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .form-input-container {
    @include flex(column, flex-start, flex-start);
    .label {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 18px;
      color: rgba(144, 147, 154, 1);
      margin-left: 30px;
      pointer-events: none;
    }
    .input-container {
      width: 418px;
      --el-component-size: 60px;
      --el-border-radius-base: 30px;
      :deep(.el-input__wrapper) {
        padding-left: 30px;
        padding-right: 30px;
      }
      :deep(.el-form-item__error) {
        padding-left: 30px;
        padding-top: 10px;
      }
    }
    .label + .input-container {
      margin-top: 20px;
    }
  }
  .form-input-container + .form-input-container {
    margin-top: 18px;
  }
  .protocol-container {
    @include flex(row, flex-start, center);
    margin-bottom: 22px;
    .text-container {
      @include flex(row, flex-start, center);
      margin-left: 7px;
      .tip {
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: #90939a;
      }
      .protocol-text {
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: var(--theme-color);
        cursor: pointer;
      }
    }
  }
}
</style>
